<script>

export default {
  name: 'Comments',

  data() {
    return {
      isliked: false,
      likedcount: 0
    }
  },

  props: {
    // 评论时间
    commentTime: {
      type: String,
      default: ''
    },
    // 点赞数
    likedCount: {
      type: Number,
      default: 0
    },
    // 是否点赞过
    liked: {
      type: Boolean,
      default: false
    },
    // 回复人评论
    replayText: {
      type: String,
      default: ''
    },
    // // 当前评论id
    // commentId: {
    //   type: Number,
    //   require: true
    // }
  },

  methods: {
    goto(event) {
      this.$emit('goDetail', event.target.dataset);
    }
  },

  // computed: {
  //   likedcount() {
  //     return this.likedCount;
  //   },
  //   isLike() {
  //     return this.liked
  //   }
  // },

  created() {
    // 将父组件传递过来的数据存储,便于子组件中可以修改
    this.isliked = this.liked;
    this.likedcount = this.likedCount;
  },

  render(h) {
    // 头像节点
    let commentImg = h('div', {
      staticClass: 'head-portrait br-50'
    }, [
      // 图片
      // h('img', {
      //   staticClass: 'img-percent pointer',
      //   // attrs: {
      //   //   'data-id': this.replayInfo.user.userId
      //   // },
      //   directives: [
      //     {
      //       name: "lazy",
      //       rawName: "v-lazy",
      //       // value: `${item.user.avatarUrl}?param=100y100`,
      //       value: `${this.releaseInfo ? this.releaseInfo.user.avatarUrl : this.replayInfo.avatarUrl}?param=100y100`,
      //       expression: "this.headPortrait",
      //     },
      //   ],
      // })
      this.$slots.avatar
    ]);

    // 评论人以及回复人评论节点
    let commentUser = h('div', {
      staticClass: 'user-comment mleft-10'
    }, [
      // 显示用户评论节点
      h('div', {
        staticClass: 'top'
      }, [
        // 回复人评论
        h('div', {
          staticClass: 'reply-content'
        }, [
          // 回复人昵称
          // h('span', {
          //   staticClass: 'font-12 pointer',
          //   style: {
          //     color: 'rgb(80, 125, 175)'
          //   },
          //   domProps: {
          //     innerHTML: `${this.replayInfo.nickname}：`
          //   },
          //   // attrs: {
          //   //   'data-id': this.replayInfo.user.userId
          //   // }
          // }),
          this.$slots.replay,
          // 回复人评论内容
          h('span', {
            staticClass: 'font-12',
            domProps: {
              innerHTML: this.replayText
            }
          })
        ]),
        // 发评人评论
        h('div', {
          staticClass: 'comment-content'
        }, [
          // 发评人内容
          // nickName,
          // h('span', {
          //   staticClass: 'font-12 pointer mleft-10',
          //   style: {
          //     color: 'rgb(80, 125, 175)'
          //   },
          //   // attrs: {
          //   //   'data-id': this.releaseInfo ? this.releaseInfo.user.userId : ''
          //   // },
          //   domProps: {
          //     innerHTML: `${this.releaseInfo ? this.releaseInfo.user.nickname : ''}：`
          //   },
          //   directives: [
          //     {
          //       name: "show",
          //       rawName: "v-show",
          //       value: this.releaseInfo,
          //       expression: "this.releaseInfo",
          //     }
          //   ],
          // }),
          this.$slots.releasename,
          // 发评人评论内容
          // content
          // h('span', {
          //   staticClass: 'font-12',
          //   domProps: {
          //     innerHTML: this.releaseInfo ? this.releaseInfo.content : ''
          //   },
          //   directives: [
          //     {
          //       name: "show",
          //       rawName: "v-show",
          //       value: this.releaseInfo,
          //       expression: "this.releaseInfo",
          //     }
          //   ],
          // })
          this.$slots.releasecontent
        ]),
        // 操作栏按钮
        h('div', {
          staticClass: 'bottom'
        }, [
          // 评论时间
          h('span', {
            staticClass: 'font-12',
            style: {
              color: 'rgb(159, 159, 159)'
            },
            domProps: {
              innerHTML: this.commentTime
            }
          }),
          // 操作按钮
          h('div', {
            staticClass: 'opera-btn'
          }, [
            // 点赞按钮
            h('button', {}, [
              h('a-icon', {
                staticClass: 'font-16',
                class: {
                  'isliked': this.isliked
                },
                attrs: {
                  type: 'like'
                },
                props: {
                  theme: this.isliked ? 'filled' : 'outlined'
                },
                on: {
                  click: () => {
                    this.isliked = !this.isliked;
                    if (this.isliked) {
                      this.likedcount++;
                    } else {
                      this.likedcount--;
                    }
                    this.$emit('giveLike', this.isliked);
                  }
                }
              }),
              h('span', {
                domProps: {
                  innerHTML: this.likedcount
                }
              })
            ]),
            // 分享按钮
            h('button', null, [
              h('a-icon', {
                staticClass: 'font-16',
                attrs: {
                  type: 'share-alt'
                },
              })
            ]),
            // 评论按钮
            h('button', null, [
              h('a-icon', {
                staticClass: 'font-16',
                attrs: {
                  type: 'message'
                },
              })
            ])
          ])
        ])
      ])
    ]);

    return h('div', {
      staticClass: 'comments'
    }, [
      h('div', {
        staticClass: 'goods-comments mtop-10'
      }, [
        // 评论标题
        // h('div', {
        //   staticClass: 'font-16 font-weight',
        //   domProps: {
        //     innerHTML: this.commentTitle
        //   }
        // }),
        // 评论主体
        h('div', {
          staticClass: 'comment-list mtop-10',
          on: {
            click: this.goto
          }
        }, [
          // commentItem
          h('div', {
            staticClass: 'comment-item'
          }, [commentImg, commentUser])
        ]),
        // 定义插槽
        // h('div', {
        //   staticClass: 'more mtop-10',
        //   style: {
        //     color: '#ccc'
        //   }
        // }, [
        //   this.$slots.more || '暂无更多评论了~'
        // ])
      ])
    ])
  }
}
</script>

<style lang="less" scoped>
.comments {
  position: relative;
  .comment-list {
    .comment-item {
      display: flex;
      align-items: center;
      border-bottom: 1px solid #e6e6e6;
      padding: 10px 0;
      color: #676767;
      .head-portrait {
        width: 40px;
        height: 40px;
        overflow: hidden;
      }
      .user-comment {
        line-height: 30px;
        flex: 1;
        // 用户评论
        .comment-content {
          background-color: #f4f4f4;
          border-radius: 6px;
          word-break: break-all;
          word-wrap: break-word;
        }
        // 回复人评论
        .reply-content {
          word-break: break-all;
          word-wrap: break-word;
        }
        .bottom {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .opera-btn {
            button {
              border: none;
              background: unset;
              cursor: pointer;
              margin-right: 10px;
              &:last-child {
                margin-right: 0;
              }
            }
            .isliked {
              color: #ec4141;
            }
          }
        }
      }
    }
  }
  // .more {
  //   position: relative;
  //   text-align: center;
  // }
}
</style>